<mat-tab-group dynamicHeight="true"> 
    <mat-tab label="Voyage">
        <div style="display: flex; width: 100%;" (click) = "endEditCallsGrid()">
            <div style="width: 50%; height: 29vh;">
                <fieldset style="width: 100%; margin-top: 1%;">
                    <div *ngIf="ShippmentFormGroup" [formGroup]="ShippmentFormGroup" style="margin-top: 1%; width: 100%;"  (click)="dataChanged()">
                        <div style="display: flex; width: 100%;" formArrayName="vessel">
                            <label>Vessel</label>
                            <div *ngFor="let v of ShippmentFormGroup.get('vessel')['controls']; let i = index" style="width: 23%;">
                                <div [formGroupName]="i">
                                    <input style="font-size: 12px; width: 100%;" type="text" formControlName="name" readonly = true>
                                </div>
                            </div>
                            <i *ngIf = "!isEdit" class = "material-icons" ngbTooltip="Add Vessel" placement = "right" (click) = "addVessel()">assignment</i>
                        </div>
                        <div style="display: flex; margin-top: 0.2%;">
                            <label>Voyage Type</label>
                            <select formControlName="charterType" required style="font-size: 12px; width: 23%;" [attr.disabled]="isEdit ? '' : null">
                                <option *ngFor="let type of voyageTypeList" [value]="type">{{type}}</option>
                            </select>
                            <input style="margin-left: 25%; font-size: 12px" type="checkbox">
                            <label style="font-size: 12px; text-align: left; margin-left: 2%; width: 20%;">NTCE Overview</label>
                        </div>
                        <div style="display: flex; margin-top: 0.2%;">
                            <label>Voyage</label>
                            <input style= "font-size: 12px; width: 23%; font-weight: bold; color: rgb(138, 17, 17);" type="text" value={{voyageCompute}} readonly = true>
                            <label style="margin-left: 8%;">Market</label>
                            <select formControlName="lineCode" required style="font-size: 12px; width: 25%;">
                                <option *ngFor="let market of marketList" [value]="market.state">{{market.name}}</option>
                            </select>
                        </div>
                        <div style="display: flex; margin-top: 0.2%;">
                            <label>BL Date</label>
                            <input style= "font-size: 12px; width: 23%;" type="date" formControlName="blDate">
                            <label style="margin-left: 8%;">Status</label>
                            <select formControlName="charterStatus" required style="font-size: 12px; width: 25%;">
                                <option *ngFor="let status of statusList" [value]="status.state">{{status.name}}</option>
                            </select>
                        </div>
                        <div style="display: flex; margin-top: 0.2%;">
                            <label>Cargo Desc.</label>
                            <select formControlName="cargoDescription" required style="font-size: 12px; width: 73%">
                                <option *ngFor="let cargo of cargoList" [value]="cargo">{{cargo}}</option>
                            </select>
                        </div>

                        <svg height="12" width="100%" class = "line">
                            <line x1="0" y1="10" x2="94%" y2="10" style="stroke:rgb(0, 0, 80);stroke-width:0.2" />
                        </svg>

                        <div style="display: flex; margin-top: 2%">
                            <label>Freight($)</label>
                            <input style="font-size: 12px; width: 23%; text-align: right;" type="number" formControlName="freightAmount">
                            <label style="margin-left: 8%;">Out.Comm.</label>
                            <input style="font-size: 12px; width: 25%; text-align: right;" type="number" formControlName="freightCommision">
                            <a style="margin-left: 1%;">%</a>
                        </div>

                        <div style="display: flex; margin-top: 3%;">
                            <span style="font-size: 12px; width: 12%;">Cargo Totals</span>
                            <svg height="12" width="100%" class = "line">
                                <line x1="0%" y1="10" x2="94%" y2="10" style="stroke:rgb(0, 0, 80);stroke-width:0.2" />
                            </svg>
                        </div>

                        <div style="width: 95%; margin-top: 1%; margin-bottom: 1.6%">
                            <label style="width: 12%; text-align: right">VolS (m3)</label>
                            <input style="font-size: 12px; width: 18%; text-align: right;" type="number" formControlName="cargoM3">
            
                            <label style="width: 12%; text-align: right">VolP (m3)</label>
                            <input style="font-size: 12px; width: 18%; text-align: right;" type="number" formControlName="volp">
            
                            <label style="width: 12%; text-align: right">Weight (MT)</label>
                            <input style="font-size: 12px; width: 18%; text-align: right;" type="number" formControlName="cargoWeight">
                        </div>
                    </div>
                </fieldset>
                <div style="margin-top: 1.3%; display: flex;">
                    <i class = "material-icons" ngbTooltip="Add Voyage Operations" placement = "right" (click) = "addVoyageOperations()">anchor</i>
                    <i class = "material-icons" ngbTooltip="Add Call" placement = "right" (click) = "addCalls()">add</i>
                    <i class = "material-icons" ngbTooltip="Delete Call" placement = "right" (click) = "deleteCalls()">delete</i>
                    <i class = "material-icons" ngbTooltip="Confirm Final Calls" placement = "right" (click) = "confirmCalls()">key</i>
                    <select id = 'callStatusPicker' style="height: 2.8vh; width: 7vw; font-size: small; margin-left: 1%;" (change)="changeCallStatusPicker($event.target.value)">
                        <option *ngFor=" let callStatus of callStatusArray">{{callStatus}}</option>
                    </select>
                </div>
            </div>
            <div style="width: 49%; margin-left: 1%;">
                <fieldset style="width: 100%; margin-top: 1%;">
                    <iframe width="99.5%" height= "350" src="https://embed.windy.com/embed2.html?lat=45.325&lon=14.441&detailLat=45.325&detailLon=14.441&width=650&height=450&zoom=5&level=surface&overlay=wind&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=default&metricTemp=default&radarRange=-1" frameborder="0"></iframe>
                </fieldset>
            </div>
        </div>
        <div style="margin-top: 0.3%; margin-bottom: 1%; width: 100%;">
            <ejs-grid #gridCalls id = "gridCalls" [dataSource]='callsArray' [allowResizing]='true' [editSettings]='editSettings' [rowHeight] = '25' (cellEdit)="cellCallsEdit($event)" (rowSelected)='rowSelectedCalls($event)' (actionBegin)='actionCallsBegin($event)'>
                <e-columns>
                    <e-column field='operationCode' headerText='Service' textAlign= 'Center' width = '12'
                    foreignKeyField='operation' foreignKeyValue='operation' [dataSource]='serviceOperationCodeArray' [customAttributes]='customAttributes'></e-column>
                    <e-column field='portName' headerText='Port' [customAttributes]='customAttributes'  [allowEditing]='false' width = '15'>
                        <ng-template #editTemplate let-data>
                            <div class="image">
                                <input readonly= true style="width: 98%;" class="e-input" name='input' type="text" value={{data.portName}}/>
                                <i class = "material-icons" ngbTooltip="Add port" placement = "right" (click) = "addPort($event)">assignment</i>
                            </div>
                        </ng-template>
                    </e-column>
                    <e-column field='portDays' headerText='Port Days' textAlign= 'Right' [allowEditing]='false' [customAttributes]='customAttributes' width = '10' type = "number" format = 'N2'></e-column>
                    <e-column field='eta' headerText='ETA' textAlign= 'Center' editType= 'datepickeredit' [edit]='etaParam' type= 'date' [customAttributes]='customAttributes' width = '15' format='yMd'></e-column>
                    <e-column field='etd' headerText='ETD' textAlign= 'Center' editType= 'datepickeredit' [edit]='etdParam' type= 'date' [customAttributes]='customAttributes' width = '15' format='yMd'></e-column>
                    <e-column field='nextPortDistance' headerText='Distance' textAlign= 'Center' [customAttributes]='customAttributes' width = '0' type = "number" format = "N2"></e-column>
                    <e-column field='vesselSpeed' headerText='Speed' textAlign= 'Center' [customAttributes]='customAttributes' width = '0' type = "number" format = "N2"></e-column>
                    <e-column field='navigationDays' headerText='Nav. Days' textAlign= 'Center' [customAttributes]='customAttributes' width = '0' type = "number" format = "N2"></e-column>
                    <e-column field='portCode' headerText='Port Code' textAlign= 'Center' [customAttributes]='customAttributes' width = '0'></e-column>
                </e-columns>
            </ejs-grid>
        </div>
    </mat-tab>
    <mat-tab label="Charge">
        <div style="width: 100%;">
            <div style="margin-top: 1%; margin-bottom: 1%; width: 100%;" (click) = "endEditChargesGrid()">
                <i class = "material-icons" ngbTooltip="Add Contract" placement = "right" (click) = "addContract()">add</i>
                <i class = "material-icons" ngbTooltip="Edit Contract" placement = "right" (click) = "editContract()">edit</i>
                <i class = "material-icons" ngbTooltip="Delete Contract" placement = "right" (click) = "deleteContract()">delete</i>
                <ejs-grid #gridContract [dataSource]='contractArray' [allowResizing]='true' [rowHeight] = '25' (rowSelected)='rowSelectedContract($event)'>
                    <e-columns>
                        <e-column field='operatorCode' headerText='Shipper' textAlign= 'Center' [customAttributes]='customAttributes'></e-column>
                        <e-column field='volumeAmount' headerText='Vol.S.' textAlign = 'Right' [customAttributes]='customAttributes' [valueAccessor]='volumeAmountFormatter'></e-column>
                        <e-column field='weightAmount' headerText='Weight' textAlign= 'Right' [customAttributes]='customAttributes' [valueAccessor]='weightAmountFormatter'></e-column>
                        <e-column field='lumpsumAmount' headerText='Lumpsum' [customAttributes]='customAttributes' textAlign= 'Right' [valueAccessor]='lumpsumFormatter'></e-column>
                        <e-column field='polName' headerText='P.o.L.' [customAttributes]='customAttributes'></e-column>
                        <e-column field='podName' headerText='P.o.D.' [customAttributes]='customAttributes'></e-column>
                        <e-column field='priceRate' headerText='Frt. Rate' [customAttributes]='customAttributes' textAlign= 'Right'></e-column>
                        <e-column field='priceUnit' headerText='Unit' [customAttributes]='customAttributes' textAlign= 'Center'></e-column>
                    </e-columns>
                </ejs-grid>
            </div>
            <div style="margin-top: 0.5%; margin-bottom: 1%; width: 100%;">
                <i class = "material-icons" ngbTooltip="Add Charge" placement = "right" (click) = "addCharges()">add</i>
                <i class = "material-icons" ngbTooltip="Delete Charge" placement = "right" (click) = "deleteCharge($event)">delete</i>
                <i class = "material-icons" ngbTooltip="Charge List" placement = "right" (click) = "chargeListPicker()">checklist_rtl</i>
                <ejs-grid #gridCharges id = "gridCharges" [dataSource]='chargeArray' [allowResizing]='true' [editSettings]='editSettings' [toolbar]='toolbar' [rowHeight] = '25' (recordDoubleClick)="doubleclickChargeGrid($event)" (rowSelected)='rowSelectedCharge($event)' (actionBegin)='actionChargesBegin($event)'>
                    <e-columns>
                        <e-column field='itemOperation' headerText='' [customAttributes]='customAttributes' textAlign = 'Center' width = '40'>
                            <ng-template #template let-data> 
                                <div> 
                                    <input id = "itemOperationCheckbox" type = "checkbox" [checked]="data.itemOperation=='1'" (change) = "changeChargeCheckbox($event)">
                                </div> 
                            </ng-template> 
                        </e-column>
                        <e-column field='chargeDesc' headerText='Charge' [customAttributes]='customAttributes' width = '140' [edit]='chargePickParams'></e-column>
                        <e-column field='itemStatus' headerText='Status' [customAttributes]='customAttributes'
                        foreignKeyField='value' foreignKeyValue='status' [dataSource]='chargeItemStatus' textAlign= 'Center' width = '120'></e-column>
                        <e-column field='invoiceNumber' headerText='Inv. No.' [customAttributes]='customAttributes' width = '80'></e-column>
                        <e-column field='invoiceDate' headerText='Inv. Date' [customAttributes]='customAttributes' width = '90' type = 'date' format='yMd' editType= 'datepickeredit'></e-column>
                        <e-column field='customer.synonim' headerText='Account-Customer' [customAttributes]='customAttributes'width = '150' [edit]='accountCustomerParams'></e-column>
                        <e-column field='customerReceiver.synonim' headerText='From/To' [customAttributes]='customAttributes' width = '140'>
                            <ng-template #editTemplate let-data>
                                <div class="image">
                                    <input readonly = true style="width: 90%;" class="e-input" name='input' type="text" value={{data.customerReceiver.synonim}}/>
                                    <i class = "material-icons" ngbTooltip="Add Customer" placement = "right" (click) = "addFromToCustomer($event)">assignment</i>
                                </div>
                            </ng-template>
                        </e-column>
                        <e-column field='invoiceAmountDebit' headerText='Debit' [customAttributes]='customAttributes' textAlign= 'Right'  width = '100' type = 'number' format = 'N2'></e-column>
                        <e-column field='invoiceAmountCredit' headerText='Credit' [customAttributes]='customAttributes' textAlign= 'Right' width = '100' type= 'number' format = 'N2'></e-column>
                        <e-column field='currencyCode' headerText='Currency' [customAttributes]='customAttributes' [edit]='currencyParams' textAlign= 'Center' width = '70'></e-column>
                        <e-column field='debitFlag' headerText='Type' [customAttributes]='customAttributes'  textAlign= 'Center' width = '70' [edit]='debitCreditParams' [dataSource]='chargeTypeArray' foreignKeyField='value' foreignKeyValue='type'></e-column>
                        <e-column field='setCargoType.itemDescription' headerText='Cargo' [customAttributes]='customAttributes' textAlign= 'Center' width = '80' [edit]='setCargoTypeEdit'></e-column>
                        <e-column field='remark' headerText='Remark' [customAttributes]='customAttributes' width = '110'></e-column>
                        <e-column field='accountCode' headerText='Account Code' [customAttributes]='customAttributes' width = '0'></e-column>
                        <e-column field='shipperCode' headerText='Shipper Code' [customAttributes]='customAttributes' width = '0'></e-column>
                        <e-column field='accountShipperCode' headerText='Account Shipper Code' [customAttributes]='customAttributes' width = '0'></e-column>
                        <e-column field='cargoType' headerText='Account Shipper Code' [customAttributes]='customAttributes' width = '0'></e-column>
                        <e-column field='invoiceReceiver' headerText='Account Shipper Code' [customAttributes]='customAttributes' width = '0'></e-column>
                        <e-column field='operatorType' headerText='Account Shipper Code' [customAttributes]='customAttributes' width = '0'></e-column>
                    </e-columns>
                </ejs-grid>
            </div>
        </div>
    </mat-tab>
</mat-tab-group>

<svg height="12" width="100%" class = "line">
    <line x1="0" y1="5" x2="100%" y2="5" style="stroke:rgb(0, 0, 0);stroke-width:0.2" />
</svg>

<span class = "form-toolbar">
    <div (click)="saveShippment()" class = "save-form-button">
        <i class="material-icons">save</i>
        <strong>Save</strong>
    </div>
    <div (click)="cancelChanges()" class = "cancel-form-button">
        <i class="material-icons">cancel </i>
        <strong>Close</strong>
    </div>
</span>
